<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单完成 - 电商网站</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <div class="container">
            <h1 class="logo">电商网站</h1>
            <nav>
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="#" id="login-link">登录</a></li>
                    <li><a href="register.html">注册</a></li>
                    <li><a href="cart.html">购物车 (<span id="cart-count">0</span>)</a></li>
                    <li><a href="profile.html">我的账户</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main class="container">
        <div class="order-complete-container">
            <div class="complete-icon">
                <svg viewBox="0 0 24 24">
                    <path fill="currentColor" d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z" />
                </svg>
            </div>

            <h1>订单提交成功!</h1>
            <p class="order-number">订单编号: <span id="order-id"></span></p>

            <div class="order-summary">
                <div class="summary-item">
                    <span>支付金额:</span>
                    <span id="complete-total">$0.00</span>
                </div>
                <div class="summary-item">
                    <span>支付方式:</span>
                    <span id="complete-payment">支付宝</span>
                </div>
                <div class="summary-item">
                    <span>收货信息:</span>
                    <span id="complete-shipping"></span>
                </div>
            </div>

            <div class="action-buttons">
                <a href="profile.html?tab=orders" class="btn view-order">查看订单</a>
                <a href="index.html" class="btn continue-shopping">继续购物</a>
            </div>

            <div class="customer-service">
                <p>如有任何问题，请联系我们的 <a href="#">客服中心</a></p>
            </div>
        </div>
    </main>

    <footer>
        <div class="container">
            <p>&copy; 2023 电商网站. 保留所有权利.</p>
        </div>
    </footer>

    <script src="js/order.js"></script>
</body>
</html>